import React, { useEffect, useState } from 'react'
import Category from '@/components/Category'
import { Button, Card, Pagination, Table } from 'antd'
import {
  PlusOutlined,
  FormOutlined,
  DeleteOutlined,
  LoadingOutlined,
  EditFilled,
} from '@ant-design/icons'
import { getspuPageList, recordsItemType } from '@/api/Product/spu'
import { ColumnsType } from 'antd/lib/table'
import { category1id, category2id, category3id } from '@/app/category'
import { store } from '@/app/store'
function Spu() {
  const storeData = store.getState()
  const [lazy, setlazy] = useState({})
  // 分页参数
  const [pageParame, setPageParame] = useState({
    page: 1,
    limit: 3,
  })
  const [loading, setloading] = useState(false)
  const [total, setTotal] = useState<number>(0)
  // 请求初始spu数据
  const reqSpuList = async function () {
    setloading(true)
    let re = await getspuPageList(
      pageParame.page,
      pageParame.limit,
      category3id(storeData) as number
    )
    setTableData(re.records)
    setTotal(re.total)
    setloading(false)
  }
  // 页码改变的回调
  const pageSizeChange = function (page: number, limit: number) {
    setPageParame({
      page,
      limit,
    })
  }
  useEffect(() => {
    store.subscribe(() => {
      setlazy({})
    })
    reqSpuList()
  }, [storeData.category.category3id, pageParame])
  // 分页列表数据
  const [tableData, setTableData] = useState<recordsItemType[]>([])
  const columns: ColumnsType<recordsItemType> = [
    {
      title: '序号',
      width: 100,
      render: (_, __, index) => {
        return <div> {index + 1} </div>
      },
    },
    {
      title: 'SPU名称',
      dataIndex: 'spuName',
    },
    {
      title: 'SPU描述',
      dataIndex: 'description',
    },
    {
      title: '操作',
    },
  ]
  return (
    <div>
      <Category />
      <Card style={{ marginTop: 20 }}>
        <Button type="primary" icon={<PlusOutlined />}>
          添加SPU
        </Button>
        <Table
          loading={loading}
          dataSource={tableData}
          rowKey={'id'}
          columns={columns}
          pagination={false}
        ></Table>
        <Pagination
          defaultCurrent={pageParame.page}
          defaultPageSize={pageParame.limit}
          onChange={pageSizeChange}
          showSizeChanger={true}
          pageSizeOptions={[3, 5, 7, 9]}
          total={total}
          hideOnSinglePage={true}
        />
      </Card>
    </div>
  )
}

export default Spu
